<template>
    <f7-page @page:beforein="pageBeforeIn">
        <f7-navbar>
            <f7-nav-left :back-link="true" ></f7-nav-left>
            <f7-nav-title>问题详情</f7-nav-title>
            <f7-nav-right>
                <f7-badge color="green">检查完毕</f7-badge>
            </f7-nav-right>
        </f7-navbar>
        <f7-list inline-labels no-hairlines no-hairlines-between inset v-if="checkQualityProblem">
            <f7-list-item>
                <f7-label style="width:30%;">标段</f7-label>
                <f7-list-item-cell>
                    {{ $store.state.global.bidSectionMap[checkQualityProblem.bidSectionId].bid_section_name + '(' + $store.state.global.projectMap[$store.state.global.bidSectionMap[checkQualityProblem.bidSectionId].project_id].project_name + ')' }}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">部位</f7-label>
                <f7-list-item-cell v-if="$store.state.global.checkItemGuidelineMap[checkQualityProblem.problemClassId].process_mode == '1' ">
                    {{checkQualityProblem.buildingName + '栋' + checkQualityProblem.unitName + '单元'  + checkQualityProblem.floorName + '层' + checkQualityProblem.roomName}}
                </f7-list-item-cell>
                <f7-list-item-cell v-if="$store.state.global.checkItemGuidelineMap[checkQualityProblem.problemClassId].process_mode == '2' ">
                    {{checkQualityProblem.buildingName + '栋'  + checkQualityProblem.floorName +'层'}}
                </f7-list-item-cell>
                <f7-list-item-cell v-if="$store.state.global.checkItemGuidelineMap[checkQualityProblem.problemClassId].process_mode == '3' ">
                    {{checkQualityProblem.buildingName + '栋'}}
                </f7-list-item-cell>
                <f7-list-item-cell v-if="$store.state.global.checkItemGuidelineMap[checkQualityProblem.problemClassId].process_mode == '5' ">
                    {{checkQualityProblem.buildingName + '栋'  + checkQualityProblem.unitName + '单元'  + checkQualityProblem.floorName + '层'}}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">检查项</f7-label>
                <f7-list-item-cell>
                    {{$store.state.global.problemClassMap[$store.state.global.problemClassMap[checkQualityProblem.problemClassId].parent_problem_class_id].problem_class_name
                    + ' - ' +
                    $store.state.global.problemClassMap[checkQualityProblem.problemClassId].problem_class_name}}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">实测点</f7-label>
                <f7-list-item-cell>
                    {{checkQualityProblem.measurePoints}}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">合格率</f7-label>
                <f7-list-item-cell>
                    {{checkQualityProblem.measurePoints == 0 ? 0 : formatPercent((checkQualityProblem.measurePoints - checkQualityProblem.problemPoints) / checkQualityProblem.measurePoints)}}%
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">爆点数值</f7-label>
                <f7-list-item-cell>
                    {{checkQualityProblem.problemPoints}}
                    <f7-link href="#" v-if="hasDrawingFile" @click="openHousePoint">户型图</f7-link>
                </f7-list-item-cell>
            </f7-list-item>

            <f7-list-item>
                <f7-label style="width:30%;">检查人</f7-label>
                <f7-list-item-cell>
                    {{$store.state.global.userMap[checkQualityProblem.registBy].realname}}&nbsp;
                    {{problemText(checkQualityProblem.registDate)}}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">问题描述</f7-label>
                <f7-list-item-cell>
                    {{checkQualityProblem.remark}}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">问题照片</f7-label>
               	<f7-list-item-cell>
                    <img width="80" height="80" style="margin-right: 5px;"
                         v-for="(imageFile, i) in checkQualityProblem.imageFile"
                         :src="imageFile.url" @click="$refs.imageFile.open(i)">
                    </img>
                </f7-list-item-cell>
                <f7-photo-browser :photos="checkQualityProblem.imageFile"
                                  type="popup" ref="imageFile" back-link-text="关闭">
                </f7-photo-browser>
            </f7-list-item>
            <f7-list-item v-if="checkQualityProblem.repairBy != null">
                <f7-label style="width:30%;">整改人</f7-label>
                <f7-list-item-cell>
	                {{$store.state.global.userMap[checkQualityProblem.repairBy].realname}}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">整改照片</f7-label>
                <f7-list-item-cell>
                    <img width="80" height="80" style="margin-right: 5px;"
                         v-for="(repairImageFile, i) in checkQualityProblem.repairImageFile"
                         :src="repairImageFile.url" @click="$refs.repairImageFile.open(i)">
                    </img>
                </f7-list-item-cell>
                <f7-photo-browser :photos="checkQualityProblem.repairImageFile"
                                  type="popup" ref="repairImageFile" back-link-text="关闭">
                </f7-photo-browser>
            </f7-list-item>

            <f7-list-item>
                <f7-label style="width:30%;">整改说明</f7-label>
                <f7-list-item-cell>
                    {{checkQualityProblem.repairRemark}}
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item>
                <f7-label style="width:30%;">抄送人</f7-label>
                <f7-list-item-cell>
	                <span v-for="(user, i) in checkQualityProblem.ccs" style="margin-right:4px;">
	                    {{$store.state.global.userMap[user].realname}}
	                </span>
                </f7-list-item-cell>
            </f7-list-item>
            <f7-list-item v-show="!isOvertime">
                <f7-label style="width:30%;"></f7-label>
                <f7-list-item-cell>
	                <f7-button @click="problemModify">修改数值</f7-button>
                </f7-list-item-cell>
            </f7-list-item>
			
        </f7-list>
    </f7-page>
</template>

<script>
import networkEvent from '@/mixins/networkEvent';
import back from '@/mixins/back.js';
import Common from "@/utils/Common.js";
import DateUtil from "@/utils/DateUtil.js";
import events from 'events';
import store from '@/store';
import { getUser, setUser, clearUser } from '@/utils/auth';
import { getStore, setStore, clearStore } from '@/utils/storage';
import keys from '@/utils/rememberKeys';
import request from '@/utils/request';
import db from '@/utils/db';

export default {
    store: store,
    data: function() {
        return {
        	checkQualityProblem: null
        }
    },
    methods: {
    	pageBeforeIn: function() {
            this.isOnline = Common.isOnline();
            var self = this;
            var qualityMeasureProblemId = this.$f7route.query.qualityMeasureProblemId;
            let sql = " \
                select b.*, c.repair \
                from tmp_unprocessed_problem_quality_measure_unprocessed b \
                left join tb_quality_measure_checkquality_repair c \
                on b.id = c.quality_measure_checkquality_problem_id \
                where b.id = '" + qualityMeasureProblemId + "' \
            ";
            Common.executeSql(sql, []).then((result) => {
        		let rs = result.rs;
        		var row = rs.rows.item(0);
                var problem = {};
                problem.appPermission = row.app_permission;
                problem.batchType = row.batch_type;
                problem.buildingId = row.building_id;
                problem.buildingName = row.building_name;
                problem.ccs = Common.strToJson(row.ccs);
                problem.drawingFile = Common.strToJson(row.drawing_file);
                problem.floorId = row.floor_id;
                problem.floorName = row.floor_name;
                problem.imageFile = Common.strToJson(row.image_file);
                problem.problemClassId = row.item_id;
                problem.measurePoints = row.measure_points;
                problem.problemPoints = row.problem_points;
                problem.problemValues = Common.strToJson(row.problem_values);
                problem.qualityMeasureCheckqualityProblemId = row.id;
                problem.registBy = row.regist_by;
                problem.registDate = new Date(row.regist_date);
                problem.remark = row.remark;
                problem.repairBy = row.repair_by;
                problem.repairDate = new Date(row.repair_date);
                problem.repairImageFile = Common.strToJson(row.repair_image_file);
                problem.repairRemark = row.repair_remark;
                problem.roomId = row.room_id;
                problem.roomName = row.room_name;
                problem.sentBackDate = new Date(row.sent_back_date);
                problem.sentBackImageFile = Common.strToJson(row.sent_back_image_file);
                problem.sentBackRemark = row.sent_back_remark;
                problem.sentBackTimes = row.sent_back_times;
                problem.smallImageFile = Common.strToJson(row.small_image_file);
                problem.smallRepairImageFile = Common.strToJson(row.small_repair_image_file);
                problem.smallSentBackImageFile = Common.strToJson(row.small_sent_back_image_file);
                problem.standardMax = row.standard_max;
                problem.standardMin = row.standard_min;
                problem.status = row.status;
                problem.tid = row.tid;
                problem.unitId = row.unit_id;
                problem.unitName = row.unit_name;
                problem.updateTime = new Date(row.update_time);
                problem.repair = row.repair;
                problem.bidSectionId = row.bid_section_id;
                self.checkQualityProblem = problem;
            }).catch(error => {
    			console.error(error);
    		});
        },
    	formatPercent: function(num) {
            return Math.floor(num * 1000) / 10;
        },
        problemText: function(date) {
            var text = '';
            if(date != null) {
            	text += DateUtil.dateToStr('yyyy-MM-dd HH:mm', date) + ' ';
            }
            return text;
        },
        openHousePoint: function() {
            var self = this;
            var drawingFile = self.checkQualityProblem.drawingFile[0];
            var router = self.$f7router.navigate('/HousePoint', {
                props: {
                    imageUrl: drawingFile.url,
                    pointCount: self.checkQualityProblem.problemPoints,
                    initialPoints: self.checkQualityProblem.problemValues,
                    editable: false,
                    hasPointValue: true
                }
            });
    	},
    	problemModify: function() {
    		var self = this;
            self.$f7.preloader.show();
            let sql = "\
                select t.*, case when p.repairs is null then '[]' else p.repairs end as repairs \
                from tmp_unprocessed_problem_quality_measure_unprocessed t \
                left join ( \
                    select quality_measure_checkquality_problem_id, \
                        '[' || group_concat('\"' || repair || '\"') || ']' as repairs \
                    from tb_quality_measure_checkquality_repair \
                    where quality_measure_checkquality_problem_id = '" + self.checkQualityProblem.qualityMeasureCheckqualityProblemId + "' \
                    group by quality_measure_checkquality_problem_id \
                ) p \
                on t.id = p.quality_measure_checkquality_problem_id \
                where t.id = '" + self.checkQualityProblem.qualityMeasureCheckqualityProblemId + "' \
            ";
           	Common.executeSql(sql, []).then((result) => {
           		let rs = result.rs;
           		let row = rs.rows.item(0);
                row.repairs = Common.strToJson(row.repairs);
                row.repair = row.repairs[0];
                row.drawing_file = Common.strToJson(row.drawing_file);
                if(row.drawing_file == null) {
                    row.drawing_file = [];
                }
                var qualityMeasureProblem = row;
                
                var url = '/QualityMeasureProblemModify';
                var router = self.$f7router.navigate(url, {
                    props: {
                        qualityMeasureProblem: qualityMeasureProblem
                    }
                });
                router.off('qualityMeasureModify');
                router.on('qualityMeasureModify', function(obj) {
                    var problemId = obj.problemId;
                    var value = obj.value;
                });
                self.$f7.preloader.hide();
           	}).catch(error => {
    			console.error(error);
    			self.$f7.preloader.hide();
    		});
    	},
    },
    computed: {
    	hasDrawingFile: function() {
            var drawingFile = this.checkQualityProblem.drawingFile;
            if(drawingFile == null || drawingFile.length == 0) {
                return false;
            } else {
                return true;
            }
        },
        isOvertime: function() {
        	var registDay = DateUtil.strFormatToDate('yyyy-MM-dd', DateUtil.dateToStr('yyyy-MM-dd', this.checkQualityProblem.registDate));
        	var registTomrrow = DateUtil.dateAdd('d', 1, registDay);
        	return new Date() > registTomrrow;
        },
    },
    watch: {
    	
    },
    created: function() {
    },
    mounted: function () {
        var self = this;
        
    }
}
</script>

<style scoped>

</style>
